/*******  TYPOGRAPHY CSS  *******/
body {
  font-family: "Lexend Deca", Noto Sans, Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-primary-text);
  transition: all .4s ease-in-out;
}

body:lang(ar),
section:lang(ar) {
  direction: rtl;
}

body:lang(ja),
body:lang(ko) {
  font-family: Noto Sans JP, Noto Sans, Arial, sans-serif;
}


/*  HEADERS  */
.headline-mega {
  font-style: normal;
  font-weight: 400;
  font-size: 6rem;
  line-height: 7.5rem;
  letter-spacing: -0.67px;
}


.headline-mega-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 4rem;
  line-height: 5.5rem;
  letter-spacing: -1.5px;
}

h1,
.headline-one {
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: -1px;
}

.headline-one-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.0rem;
  letter-spacing: -0.5px;
}



h2,
.headline-two {
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.5rem;
  letter-spacing: -0.5px;
}

.headline-two-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 4rem;
  letter-spacing: -1px;
}



h3,
.headline-three {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3rem;
}

.headline-three-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3rem;
  letter-spacing: -0.5px;
}



h4,
.headline-four {
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
}

.headline-four-alternative {
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.5rem;
}

h5,
.headline-five {
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.headline-five-alternative {
  font-style: normal;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

h6,
.headline-six {
  font-style: normal;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.headline-six-alternative {
  font-style: normal;
  font-weight: 900;
  font-size: 1.0rem;
  line-height: 1.75rem;
}




.highlight {
  background: var(--color-green-light);
  padding: 5px;

  position: relative;

  white-space: nowrap;
}

.highlight::before {
  content: "\A";
  background: transparent url(highlight_l.svg) no-repeat;
  background-position: top right;
  position: absolute;
  left: -1em;
  top: -0.5em;
  width: 1em;
  height: 2em;
}

.highlight::after {
  content: "\A";
  background: transparent url(highlight_r.svg) no-repeat;
  background-position: bottom left;
  position: absolute;
  right: -1em;
  top: 0px;
  width: 1em;
  height: 2em;
}

.highlight-left,
.highlight-right,
.highlight-middle {
  background: var(--color-green-light);
  padding: 5px;
  position: relative;
  display: inline-block;
}

.highlight-left::before {
  content: "\A";

  background: transparent url("data:image/svg+xml,%3Csvg width='12' height='93' viewBox='0 0 12 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 23.0682H10.8182V1.25H1V23.0682Z' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3Cpath d='M10.7885 22.6787V92.2382' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat;
  position: absolute;
  background-position: top right;
  left: -1em;
  top: -0.5em;
  width: 1em;
  height: 2em;
}

.highlight-right::after {
  content: "\A";

  background: transparent url("data:image/svg+xml,%3Csvg width='13' height='93' viewBox='0 0 13 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.54492 92.159H11.3631V70.3408H1.54492V92.159Z' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3Cpath d='M1.54545 73.6133V0.522461' stroke='%23003C46' stroke-width='1.36778' stroke-linejoin='round'/%3E%3C/svg%3E ") no-repeat;
  background-position: bottom left;
  position: absolute;
  right: -1em;
  top: 0px;
  width: 1em;
  height: 2em;
}

.highlight-alt {
  background: var(--color-green-light);
  padding: 5px 0.25em;
}

h1:has(span.highlight),
h1:has(span.highlight-left) {
  line-height: 1.2;
}



/* Keylines */
.keyline {
  position: relative;
  margin-top: 40px;
}

.keyline::before {
  content: "";
  width: 70px;
  height: 4px;
  position: absolute;
  top: -30px;
}

.keyline-green::before {
  background: var(--color-green-light);
}

.keyline-white::before {
  background: var(--color-white);
}

.keyline-petrol::before {
  background: var(--color-petrol);
}

.keyline-blue::before {
  background: var(--color-blue-50);
}

.keyline-grey::before {
  background: #c4c4c4;
}

/*  LINKS & TEXT COLOR OVERRIDES */
main a:link {
  color: var(--color-petrol);
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol);
}

main a:visited {
  color: var(--color-petrol);
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol);
}

main a:hover {
  color: var(--color-petrol);
  text-decoration: none;
  border-bottom: 2px solid var(--color-green-light);
}

main a:active {
  color: var(--color-petrol);
  text-decoration: none;
  border-bottom: 2px solid var(--color-blue);
}



main .brand-color-background-petrol,
main .brand-color-background-blue {
  color: var(--color-white);
}

main .brand-color-background-petrol a:link,
main .brand-color-background-blue a:link {
  color: var(--color-petrol-30b);
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol-30b);
}

main .brand-color-background-petrol a:visited,
main .brand-color-background-blue a:visited {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 2px solid var(--color-purple-light);
}

main .brand-color-background-petrol a:hover,
main .brand-color-background-blue a:hover {
  color: var(--color-petrol-30b);
  text-decoration: none;
  border-bottom: 2px solid var(--color-green-light);
}

main .brand-color-background-petrol a:active,
main .brand-color-background-blue a:active {
  color: var(--color-petrol-30b);
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol-30b);
}



span.ot-pref-opener {
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol);
  cursor: pointer;
}

main span.ot-pref-opener:hover {
  text-decoration: none;
  border-bottom: 2px solid var(--color-green-light);
}


/*  PARGRAPH TEXT  */
p {
  line-height: 1.5em;
}

p.large {
  font-size: 1.25em;
  line-height: 2rem;
}

p.small {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

p.x-small {
  font-size: 0.625rem;
  line-height: 1rem;
}

.brand-color-background-petrol p {
  color: var(--color-white);
}



sup,
sub {
  line-height: 0;
  font-size: 0.75rem;
}

.footnote {
  font-size: 0.75em;
  text-indent: -6px;
  padding-left: 6px;
  margin: 0;
}

/* LISTS */
ul,
ol {}

ul li,
ol li {
  line-height: 1.5em;
  margin-bottom: 1.0em;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-top: 1.0em;
}

ul.circle {
  list-style-type: circle;
}

ul.disc {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ol.armenian {
  list-style-type: armenian;
}

ol.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

ol.decimal {
  list-style-type: decimal;
}

ol.decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

ol.georgian {
  list-style-type: georgian;
}

ol.hebrew {
  list-style-type: hebrew;
}

ol.hiragana {
  list-style-type: hiragana;
}

ol.hiragana-iroha {
  list-style-type: hiragana-iroha;
}

ol.katakana {
  list-style-type: katakana;
}

ol.katakana-iroha {
  list-style-type: katakana-iroha;
}

ol.lower-alpha {
  list-style-type: lower-alpha;
}

ol.lower-greek {
  list-style-type: lower-greek;
}

ol.lower-latin {
  list-style-type: lower-latin;
}

ol.lower-roman {
  list-style-type: lower-roman;
}

ol.upper-alpha {
  list-style-type: upper-alpha;
}

ol.upper-latin {
  list-style-type: upper-latin;
}

ol.upper-roman {
  list-style-type: upper-roman;
}

ol.none {
  list-style-type: none;
}

/*  STATS   */
div.statistics-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 3em 0;
}

div.stat {
  height: 280px;
  border: solid 0px var(--color-white);
  width: calc(50% - 3em);

  display: inline-block;
  margin: 1em 0;
}





div.stat .stat-primary {
  font-size: 12.0em;
  line-height: 0.875em;
  letter-spacing: -3px;
}

div.stat .stat-secondary {
  font-size: 6.0em;
  color: var(--color-petrol-30);
  letter-spacing: -1px;
}

div.stat .stat-byline {
  font-size: 1em;
  color: var(--color-petrol-30);
  margin: 1em 0 0 0;
  max-width: 75%;
}

@media only screen and (max-width: 768px) {
  div.stat {
    width: 100%;
    height: auto;
    text-align: center;
  }

  div.stat:not( :has(p)) {
    height: 0;
  }

  div.stat::has(p) {
    height: auto;
  }

  div.stat .stat-byline {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1200px) {
  div.stat .stat-primary {
    font-size: 7em;
  }
}

/*  CHIP  */
.chip {
  background-color: var(--color-grey-10);
  color: var(--color-petrol);
  font-size: 0.75em;
  line-height: 3em;
  border-radius: 10px;
  padding: 4px 10px;
  margin: .5em .75em;
  white-space: nowrap;
}

.chip::after {
  content: "\A";
  white-space: pre;
}



/*  BADGE  */
.badge-blue {
  border-radius: 40px;
  padding: 13px 18px;
  background: var(--color-blue);
  color: white;
}


/*  LIGHT EYEBROW  */
.light-eyebrow-text {
  color: var(--color-petrol-50);
}

.brand-color-background-petrol .light-eyebrow-text{
  color: var(--color-green-light);
}